<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>班级管理</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css"/>
</head>

<body>
<% include("../layout/loading.html"){} %>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <form>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">班级名称:</label>
                        <div class="layui-input-block">
                            <input type="text" name="className"  autocomplete="off" placeholder="班级名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">选择校区:</label>
                        <div class="layui-input-block">
                            <select name="schoolId">
                                <option value="">全部校区</option>
                                <% for(school in schoolList) { %>
                                <option value="${school.id}">${school.schoolName}</option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属机构:</label>
                        <div class="layui-input-block">
                            <select name="toOrganizationId">
                                <option value="">全部</option>
                                <% for(organization in organizationList) { %>
                                <option value="${organization.id}">${organization.organizationName}</option>
                                <% } %>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button lay-submit=""  lay-filter="btnSearchSubmit" type="submit"  class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
<!--                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>-->
                        <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                    </div>
                </div>
                </form>
                <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
            </div>

            <table class="layui-table" id="classsTable" lay-filter="classsTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="courseStatus">课程状态</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelClasss">
    <form id="modelClasssForm" lay-filter="modelClasssForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">班级名称:</label>
            <div class="layui-input-block">
                <input name="className" placeholder="请输入" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属机构:</label>
            <div class="layui-input-block">
                <select name="toOrganizationId" xm-select="toOrganizationId" lay-verType="tips" lay-verify="required" lay-filter="organizationType">
                    <option value="">请选择</option>
                    <% for(organization in organizationList) { %>
                    <option value="${organization.id}">${organization.organizationName}</option>
                    <% } %>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属校区:</label>
            <div class="layui-input-block">
                <select name="schoolId" id="schoolId">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级负责人:</label>
            <div class="layui-input-block">
                <select name="sysUserId" id="sysUserId">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分配课程:</label>
<!--            <input id="edtSearch" class="layui-input" type="text" placeholder="校区名称"/>-->
            <div class="layui-input-block">
                <input name="unitName" type="text" class="layui-input" placeholder="单元名称:" lay-verify="required"/>
                <select name="courseId">
                    <option value="">请选择课程</option>
                    <% for(course in courseList) { %>
                    <option value="${course.id}">${course.courseName}</option>
                    <% } %>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block" style="width: 250px">
                <button id="addSpecification" class="layui-btn"><i class="layui-icon">&#xe654;</i></button>
                <span style="color: red;margin-left: 10px">增加课程</span>
            </div>
        </div>
        <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="classSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/libs/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;

        // 渲染表格
        var insTb = table.render({
            elem: '#classsTable',
            url: '/classs/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers'},
                {field: 'className', title: '班级名称'},
                {field: 'schoolName', title: '所属校区'},
                {field: 'toOrganizationName', title: '所属机构'},
                {field: 'sysUserName', title: '班级负责人'},
                {field: 'distributionCourse', title: '分配课程'},
                {align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 200}
            ]]
        });

        // 添加
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // // 查询
        // $('#btnSearch').click(function () {
        //     insTb.reload({where: {keyword: $('#edtSearch').val()}});
        // });

        //监听提交搜索
        form.on('submit(btnSearchSubmit)', function(data){
            var res=data.field;
            // console.log(res)
            insTb.reload({where: res,page:1});
            return false;
        });

        // 重置
        $('#btnReset').click(function () {
            $('#edtSearch').val("");
            window.location.reload();
        });

        // 工具条点击事件
        table.on('tool(classsTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDel(obj);
            }
        });

        // 删除
        function doDel(obj) {
            top.layer.confirm('确定要删除“' + obj.data.className + '”班级吗？', {
                skin: 'layui-layer-admin'
            }, function (i) {
                top.layer.close(i);
                layer.load(2);
                $.post('/classs/delete', {
                    classId: obj.data.id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

        //联动,机构，校区，班级负责人
        form.on('select(organizationType)', function(data){
            var val=data.value;
            $.ajax({
                type: 'GET',
                url: '/admin/school/getListByOrganizationId',
                data: {organizationId:val},
                dataType:  'json',
                success: function(data){
                   console.log(data);
                    $("#schoolId").empty();
                    $('#schoolId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                    $.each(data, function (index, item) {
                        $('#schoolId').append(new Option(item.schoolName, item.id));// 下拉菜单里添加元素
                    });
                    form.render("select");//重新渲染 固定写法
                }
            });

            var valSysUser=data.value;
            $.ajax({
                type: 'GET',
                url: '/sys/user/getListByOrganizationId',
                data: {organizationId:valSysUser},
                dataType:  'json',
                success: function(data){
                    console.log(data);
                    $("#sysUserId").empty();
                    $('#sysUserId').append(new Option("请选择", ""));// 下拉菜单里添加元素
                    $.each(data, function (index, item) {
                        $('#sysUserId').append(new Option(item.userName, item.id));// 下拉菜单里添加元素
                    });
                    form.render("select");//重新渲染 固定写法
                }
            });

        });

        // 显示编辑弹窗
        function showEditModel(mRole) {
            admin.open({
                type: 1,
                title: (mRole ? '修改' : '添加') + '校区',
                content: $('#modelClasss').html(),
                success: function (layero, dIndex) {
                    var url = mRole ? '/classs/update' : '/classs/add';
                    form.val('modelClasssForm', mRole);  // 回显数据
                    // 表单提交事件
                    form.on('submit(classSubmit)', function (data) {
                        console.log(data.field);
                        layer.load(2);
                        $.post(url, data.field, function (res) {

                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                }
            });
            //新增课程
            $('#addSpecification').click(function () {
                var dom = $(this).parents('.layui-form-item').prev();
                dom.after("");
                return false;
            });
            //删除规格
            var delSpecification = [];
            $(document).on('click', "button[name='delSpecification']", function () {
                var dom = $(this).parents('.layui-form-item');
                //
                // var specificationDom = dom.nextAll('.specification');
                // $.each(specificationDom, function (index, item) {
                //     var specificationLabel = $(this).children(":first").children(":last");
                //     var count = specificationLabel.text().split(':')[0].substring(2);
                //     specificationLabel.html('规格' + (count - 1) + ':');
                // });
                //删除节点
                dom.next().remove();
                dom.remove();
                return false;
            });
        }
    });
</script>
</body>
</html>